<template>
  <div id="phone">
    <div class="head">手机号码归属地查询</div>
    <div class="parent" id="A">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label>
          <el-input v-model="form.phone" placeholder="请输入要查询的手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.enter="sumbitForm()">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="two">
      <div class="A"></div>
    </div>
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
import $ from "jquery";
export default {
  data() {
    return {
      form: {
        phone: ""
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    sumbitForm() {
      axios("/phoneAddress?phone=" + this.form.phone + "")
        .then(res => {
          $(".A").empty();
          res = JSON.parse(res.data.data);

          console.log(res.result.province);
          var newdiv = $(
            `<div>您查询的手机号${this.form.phone}的归属地为${res.result.province}${res.result.city}${res.result.company}</div>`
          );
          $(".two div").append(newdiv);
        })

        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
#phone {
  height: calc(100vh - 50px);
  background-color: #2c343c;
}
.head {
  height: 30%;
  text-align: center;
  font-size: 50px;
  font-family: YouYuan;
  color: aliceblue;
  line-height: 130px;
}
/* .parent {
  
} */
.two {
  height: 300px;
  color: aliceblue;
  text-align: center;
  font-size: 40px;
}
</style>